/**筛选表单 */
import { Button, Form, Input, DatePicker, } from 'antd';
import moment from 'moment';
import React from 'react';
const { RangePicker } = DatePicker;

const ScreenForm = (props: { setParams: any }) => {
  const [form] = Form.useForm();
  const { setParams } = props;

  const search = async () => {
    const { activityName, password } = await form.getFieldsValue();

    const queryStartDate = password
      ? moment(password[0]).format('YYYY-MM-DD HH:mm:ss')
      : '';
    const queryEndDate = password
      ? moment(password[1]).format('YYYY-MM-DD HH:mm:ss')
      : '';
    setParams((val: { activityStatus: string }) => ({
      ...val,
      activityName: activityName ? activityName.trim() : '',
      queryStartDate,
      queryEndDate,
      page: 1,
      pageSize: 10,
    }));
  };
  const reset = () => {
    form.resetFields();
    setParams((val: { activityStatus: string }) => ({
      ...val,
      activityName: '',
      queryStartDate: '',
      queryEndDate: '',
      page: 1,
      pageSize: 10,
    }));
  };
  return (
    <div style={{ marginBottom: 10 }}>
      <Form form={form} name="horizontal_login" layout="inline">
        <Form.Item
          name="activityName"
          label="活动名称"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input placeholder="请输入" style={{ width: 300 }} />
        </Form.Item>
        <Form.Item
          name="password"
          label="创建时间"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <RangePicker
            showTime
            style={{ width: 300 }}
            placeholder={['开始时间', '结束时间']}
          />
        </Form.Item>
        <Form.Item>
          <Button type="primary" style={{ marginRight: 20 }} onClick={search}>
            搜索
          </Button>
          <Button onClick={reset}>重置</Button>
        </Form.Item>
      </Form>
    </div>
  );
};
export default ScreenForm;
